<template>
<div>
    <update :visible="editShow" :deliverData="dStudent" @set="setVisible"></update>
    <add :visible="addShow" @setAdd="setVisibleAdd"></add>
    <el-button type="primary" icon="el-icon-plus" @click="enAddShow">添 加</el-button>


    <el-table
            :data="tableData.filter(data => !search || data.sname.toLowerCase().includes(search.toLowerCase())).slice((currentPage-1)*pagesize,currentPage*pagesize)"
            style="width: 100%">

        <el-table-column
                label="编号"
                prop="sid">
        </el-table-column>
        <el-table-column
                label="学生编号"
                prop="sstudentid">
        </el-table-column>
        <el-table-column
                label="姓名"
                prop="sname">
        </el-table-column>
        <el-table-column
                label="性别"
                prop="ssex">
        </el-table-column>
        <el-table-column
                label="年龄"
                prop="sage">
        </el-table-column>
        <el-table-column
                label="电话"
                prop="sphone">
        </el-table-column>
        <el-table-column
                label="班级编号"
                prop="sclassid">
        </el-table-column>
        <el-table-column
                label="班级类别"
                prop="sclassname">
        </el-table-column>
        <el-table-column
                label="宿舍"
                prop="sdormitoryid">
        </el-table-column>
        <el-table-column
                align="right">
            <template slot="header" slot-scope="scope">
                <el-input
                        v-model="search"
                        size="mini"
                        placeholder="输入关键字搜索"/>
            </template>
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        type="primary"
                        @click="handleEdit(scope.$index, scope.row)">Edit</el-button>

                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 8, 20, 40]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length">
    </el-pagination>
</div>


</template>


<script>

    import instance from "../../utils/request";
    import Update from "@/views/student/update";
    import Add from "@/views/student/add";


    export default {
        name: "show" ,
        components: {Add, Update},
        data() {
            return{
                tableData:[],
                search: '',
                editShow: false,
                addShow: false,
                dStudent:{},
                currentPage:1, //初始页
                pagesize:5,    //    每页的数据
            }
        },
        methods: {
            handleEdit(index, row) {
                console.log(index, row);
               console.log(row.sid);
               console.log(row);
               this.editShow=true;
               this.dStudent=row;
                console.log(this.editShow);
            },
            handleDelete(index, row) {
                console.log(index, row);
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteClass(row.sid);
                    this.editShow=false;
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            queryAll(){
             instance.get("/dStudent/query").then(res=>{
                 this.tableData=res.data;
             });
            },
            deleteClass(id){
                instance.delete("/dStudent?id="+id).then(res=>{
                    this.queryAll();
                })
            },
            setVisible(){
                this.editShow=false;
            },
            setVisibleAdd(){
                this.addShow=false;
                this.queryAll();
            },
            enAddShow(){
                this.addShow=true;
            },
            // 初始页currentPage、初始每页数据数pagesize和数据data
            handleSizeChange: function (size) {
                this.pagesize = size;
                console.log(this.pagesize)  //每页下拉显示数据
            },
            handleCurrentChange: function(currentPage){
                this.currentPage = currentPage;
                console.log(this.currentPage)  //点击第几页
            },
        },
        created(){
            this.queryAll();
        }
    }
</script>
<style scoped>

</style>
